<template>
  <div id="supervisionInformation" class="app-container">
    <!-- <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="现场踏勘" name="1"></el-tab-pane>
        <el-tab-pane label="前期测绘" name="2"></el-tab-pane>
        <el-tab-pane label="成功初审" name="3"></el-tab-pane>
        <el-tab-pane label="成果复审" name="4"></el-tab-pane>
      </el-tabs>
    </div>-->
    <div class="filter-container">
      <el-form :inline="true" label-position="right" label-width="90px" class="demo-form-inline">
        <el-form-item label="权利人姓名">
          <el-input
            style="width: 200px;"
            v-model="listQuery.applicantName"
            placeholder
            class="filter-item"
          />
        </el-form-item>
        <el-form-item label="复垦片块">
          <el-select
            style="width: 200px;"
            clearable
            v-model="listQuery.landId"
            class="filter-item"
            placeholder="请选择片块"
          >
            <el-option
              v-for="item in selectData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            style="width: 200px;"
            v-model="listQuery.startTime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            class="filter-item"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker
            style="width: 200px;"
            v-model="listQuery.finishTime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            class="filter-item"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchData" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-button style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search">查询</el-button> -->
    </div>
    <!-- <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger">删除所选</el-button>
    </div>-->

    <el-table
      v-loading="listLoading"
      :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" align="center" label="序号" width="70" />
      <el-table-column label="申请编号" align="center">
        <template slot-scope="scope">{{ scope.row.applyNum }}</template>
      </el-table-column>
      <el-table-column label="权利人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="外业核查地块" align="center">
        <template slot-scope="scope">{{ scope.row.landName }}</template>
      </el-table-column>
      <el-table-column class-name="status-col" label="外业核查时间" align="center">
        <template slot-scope="scope">{{ scope.row.time?scope.row.time:'' }}</template>
      </el-table-column>
      <el-table-column align="center" label="核查位置">
        <template slot-scope="scope">
          <span>{{ scope.row.place?scope.row.place:'' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.time" @click="toSee(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="listQuery.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { supervisingInfo } from "@/api/storeForRecordSee";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      activeName: "1",
      list: null,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        applicantName: "",
        startTime: "",
        finishTime: "",
        landId: ""
      },
      total: 0, //总数
      selectData: []
    };
  },
  created() {
    // this.fetchData();
    this.getList();
    this.getDataSelect();
  },
  methods: {
    //前往查看
    toSee(row) {
      this.$router.push({
        path: "/entryRecordSee/supervisionInformation/detail",
        query: {
          id: row.landId,
          vcr: row.vcr ? row.vcr : "",
          photo: row.photo ? row.photo : "",
          coorDonate: row.coorDonate,
          landName: row.landName,
          time: row.time
        }
      });
    },
    //搜索
    searchData() {
      this.getList();
    },
    getList() {
      //现场勘查数据
      this.listLoading = true;
      var data = {};
      var objArr = this.listQuery;
      for (var index in objArr) {
        if(objArr[index]!==''&&objArr[index]!=null){
          if(index == "startTime" || index == "finishTime"){
            data[index]=objArr[index] + " " + "00:00:00";
          }else{
            data[index]=objArr[index];
          }
        }
      }
      // if(data['startTime']) data['startTime'] = data['startTime'] + ' 00:00:00'
      // if(data['endTime']) data['endTime'] = data['endTime'] + ' 00:00:00'
      data['projectId'] = localStorage.getItem('projectId')
      supervisingInfo(data)
        .then(res => {
          this.listLoading = false
          this.list = res.data.rows
          this.total = res.data.total
        })
        .catch(error => {
          this.listLoading = false
        })
    },
    getDataSelect() {
      //
      var data = {
        page: 1,
        size: 99999
      };
      data["projectId"] = localStorage.getItem("projectId");
      supervisingInfo(data).then(res => {
        var arr = [];
        res.data.rows.forEach(item => {
          arr.push({ value: item.landId, label: item.landName });
        });
        this.selectData = arr;
      });
    },

    // 改变每页显示条数
    handleSizeChange(e) {
      this.listQuery.size = e;
      this.getList();
    },
    // 改变页码
    handleCurrentChange(num) {
      console.log(num);
      this.listQuery.page = num;
      this.getList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="scss" scoped>
#supervisionInformation /deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
</style>
